<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            /* 去掉默认的小圆点 */
            list-style: none;
        }
    </style>
</head>

<body>
    <!-- <ul> -->
    <!-- <li>linux</li>
        <li>centos</li>
        <li>ubuntu</li>
        <li>redhat</li> -->
    <!-- </ul> -->
    <script>
        var arr = ['linux', 'centos', 'redhat', 'ubuntu', 'win10', 'win7']
        // 遍历拼接字符串
        var tpl = '<ul>'
        for (var i = 0; i < arr.length; i++) {
            tpl += '<li>' + arr[i] + '</li>'
        }
        tpl += '</ul>'
        // console.log(tpl)
        // 添加html代码到dom
        document.querySelector('body').innerHTML = tpl
        // title修改内容
        document.querySelector('title').innerHTML = '动态生成列表'
    </script>
</body>

</html>